@use "@/common/styles/colors"

.keyboard-shortcuts-overlay
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: rgba(0, 0, 0, 0.5)
  backdrop-filter: blur(4px)
  z-index: 9999
  display: flex
  align-items: center
  justify-content: center

.keyboard-shortcuts-menu
  position: relative
  width: 500px
  max-width: 90vw
  max-height: 70vh
  background-color: colors.$gray-full
  border: 1px solid colors.$gray
  border-radius: 6px
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)
  z-index: 10000
  display: flex
  flex-direction: column
  overflow: hidden

  .keyboard-shortcuts-header
    padding: 12px
    background-color: colors.$dark-gray
    border-bottom: 1px solid colors.$gray
    display: flex
    align-items: center
    justify-content: space-between

    .search-wrapper
      display: flex
      align-items: center
      flex: 1
      margin-right: 10px

      svg
        width: 18px
        height: 18px
        color: colors.$light-gray
        margin-right: 8px

      input
        flex: 1
        background: transparent
        border: none
        color: colors.$white
        font-size: 14px
        padding: 5px 0
        outline: none

        &::placeholder
          color: colors.$light-gray

    .close-button
      background: transparent
      border: none
      cursor: pointer
      padding: 6px
      border-radius: 4px
      display: flex
      align-items: center
      justify-content: center
      color: colors.$light-gray

      svg
        width: 18px
        height: 18px
      
      &:hover
        background-color: colors.$gray
        color: colors.$white

  .keyboard-shortcuts-content
    display: flex
    flex-direction: column
    max-height: calc(70vh - 50px)
    overflow-y: auto
    overflow-x: hidden

    .shortcuts-list
      padding: 12px
      box-sizing: border-box
      width: 100%

      .shortcut-item
        padding: 12px
        background-color: colors.$darker-gray
        border: 1px solid colors.$gray
        border-radius: 4px
        margin-bottom: 10px
        cursor: pointer
        width: 100%
        box-sizing: border-box
        transition: all 0.2s ease
        
        &:last-child
          margin-bottom: 0

        &:hover
          background-color: colors.$dark-gray
          border-color: colors.$primary

        .shortcut-info
          display: flex
          align-items: center
          justify-content: space-between

          h4
            margin: 0
            color: colors.$white
            font-size: 14px
            font-weight: 500

          .shortcut-category
            padding: 3px 10px
            border-radius: 12px
            background-color: colors.$dark-gray
            color: colors.$light-gray
            font-size: 11px
            font-weight: 500

    .no-shortcuts
      display: flex
      justify-content: center
      align-items: center
      padding: 30px 15px
      
      p
        color: colors.$light-gray
        text-align: center
        font-size: 14px
